import React, { memo } from 'react';
import { SearchArtistWrapper } from './style';
import { formatImg } from '@/utils/format'
import useShowArtistDetail from '@/hooks/useShowArtistDetail'
export default memo(function SearchArtist(props) {
  const { list } = props
  const goToArtistDetail = useShowArtistDetail()
  return (
    <SearchArtistWrapper>
      {
        list.map(item => {
          return (
            <div className="item" onClick={e => goToArtistDetail(item.id)} key={item.id}>
              <img src={formatImg(item.picUrl, 130)} alt="" />
              <div className="mask sprite_covor"></div>
              <div className="name">{item.name}</div>
            </div>
          )
        })
      }
    </SearchArtistWrapper>
  )
});
